<template>
  <div class="right-box">
    <el-card class="my-card" shadow="hover">
      <template #header>
        <div class="my-card-header">我的名片</div>
      </template>
      <div class="my-card-info">
        <div class="my-card-info-item" v-if="configInfoData.network_name"
          >网名：{{ configInfoData.network_name }}</div
        >
        <div class="my-card-info-item" v-if="configInfoData.occupation"
          >职业：{{ configInfoData.occupation }}</div
        >
        <div class="my-card-info-item" v-if="configInfoData.current_residence"
          >现居：{{ configInfoData.current_residence }}</div
        >
        <div class="my-card-info-item" v-if="configInfoData.email"
          >Email：{{ configInfoData.email }}</div
        >
        <div class="my-card-info-item" v-if="configInfoData.wx">微信：{{ configInfoData.wx }}</div>
      </div>
      <div class="my-card-bottom-box">
        <NuxtLink
          alt=""
          :to="configInfoData.url"
          target="_blank"
          title="网站地址"
          class="my-card-bottom-item"
        >
          <img src="~/assets/images/layouts/right/c01.png" alt="" />
        </NuxtLink>
        <NuxtLink
          alt=""
          v-if="configInfoData.email"
          :to="'http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=' + configInfoData.email"
          target="_blank"
          title="我的邮箱"
          class="my-card-bottom-item"
        >
          <img src="~/assets/images/layouts/right/c02.png" alt="" />
        </NuxtLink>
        <NuxtLink
          alt=""
          v-if="configInfoData.qq"
          :to="
            'http://wpa.qq.com/msgrd?v=3&amp;uin=' + configInfoData.qq + '&amp;site=qq&amp;menu=yes'
          "
          target="_blank"
          title="QQ联系我"
          class="my-card-bottom-item"
        >
          <img src="~/assets/images/layouts/right/c03.png" alt="" />
        </NuxtLink>
        <NuxtLink title="关注我的微信" class="my-card-bottom-item">
          <el-popover placement="top" title="关注我的微信" trigger="hover">
            <template #reference>
              <img src="~/assets/images/layouts/right/c04.png" alt="" />
            </template>
            <template #default>
              <div class="wx-image-box">
                <img
                  :src="configInfoData.wx_image_to.http_url"
                  alt="关注我的微信"
                  class="wx-image"
                />
              </div>
            </template>
          </el-popover>
        </NuxtLink>
      </div>
    </el-card>

    <el-card class="list-box" shadow="hover" v-if="configInfoData.click_ranking_list.length">
      <template #header>
        <div class="list-card-header">点击排行</div>
      </template>
      <div class="list-content">
        <div v-for="(item, index) in configInfoData.click_ranking_list" :key="index">
          <div class="list-item-one" v-if="item.image_to && index === 0">
            <NuxtLink :to="'/details/' + item.id" target="_blank" :title="item.name" alt="">
              <img :src="item.image_to.http_url" class="img-box" alt="" />
              <span class="list-name-one">{{ item.name }}</span>
            </NuxtLink>
          </div>
          <NuxtLink
            alt=""
            v-else-if="index > 0"
            :to="'/details/' + item.id"
            target="_blank"
            :title="item.name"
            class="list-item"
          >
            <div :class="index < 4 ? 'item-index' : 'item-index action'">{{ index }}</div>
            <span class="list-name">{{ item.name }}</span>
          </NuxtLink>
        </div>
      </div>
    </el-card>

    <el-card class="list-box" shadow="hover" v-if="configInfoData.recommend_list.length">
      <template #header>
        <div class="list-card-header">站长推荐</div>
      </template>
      <div class="list-content">
        <div v-for="(item, index) in configInfoData.recommend_list" :key="index">
          <div class="list-item-one" v-if="item.image_to && index === 0">
            <NuxtLink :to="'/details/' + item.id" target="_blank" :title="item.name" alt="">
              <img :src="item.image_to.http_url" class="img-box" alt="" />
              <span class="list-name-one">{{ item.name }}</span>
            </NuxtLink>
          </div>

          <NuxtLink
            v-else
            :to="'/details/' + item.id"
            target="_blank"
            :title="item.name"
            class="list-item1"
          >
            <div class="item-image1" v-if="item.image_to">
              <img :src="item.image_to.http_url" class="item-image1-box" alt="" />
            </div>
            <span class="list-name1">{{ item.name }}</span>
          </NuxtLink>
        </div>
      </div>
    </el-card>

    <el-card class="list-box" shadow="hover">
      <template #header>
        <div class="list-card-header">站点信息</div>
      </template>
      <div class="site-box">
        <div class="site-item" v-if="configInfoData.station_establishment_time">
          <b>建站时间</b>
          ：{{ configInfoData.station_establishment_time }}
        </div>
        <div class="site-item" v-if="configInfoData.website_program">
          <b>网站程序</b>
          ：<NuxtLink
            alt=""
            :to="configInfoData.website_program_url ? configInfoData.website_program_url : '/'"
            target="_blank"
            :title="configInfoData.website_program"
            >{{ configInfoData.website_program }}</NuxtLink
          >
        </div>
        <div class="site-item" v-if="configInfoData.gzh_image_to.http_url">
          <b>微信公众号</b>
          ：扫码关注公众号
        </div>
        <div class="site-image-box" v-if="configInfoData.gzh_image_to.http_url">
          <img
            :src="configInfoData.gzh_image_to.http_url"
            alt="扫码关注公众号"
            class="site-image"
          />
        </div>
      </div>
    </el-card>
    <el-card class="list-box" shadow="hover" v-if="linkData.length">
      <template #header>
        <div class="list-card-header">友情链接</div>
      </template>
      <div class="link-box">
        <NuxtLink
          alt=""
          class="link-item"
          v-for="(item, index) in linkData"
          :to="item.url"
          target="_blank"
          :title="item.name"
          :key="index"
          >{{ item.name }}
        </NuxtLink>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
const linkData = useLinkData();
const configInfoData = useConfig();
</script>
<style lang="less" scoped>
@import './index.less';
</style>
